
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtButton,AtCard,AtSearchBar } from 'taro-ui'
import api from '../../utils/api'
import { Loading } from '../../components/Loading'

import './index.css'

export default class Index extends Component {

  state = {
    loading: true,
    threads: [],
    value: ''
  }

  componentWillMount () { }

  async componentDidMount () {
    try {
      await Taro.request({
        url: api.getSearchList({page:1, keysword:this.state.value}),
        success: function (res) {
          console.log('获取正常', res.data)
        }
      }).then(res => {
         console.log(res.data)
         this.setState({
          threads: res.data,
          loading: false
        })
      })
    } catch (error) {
      Taro.showToast({
        title: '未能搜索到数据'
      })
    }
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */

   config = {
    navigationBarTitleText: '需求搜索'
  }


  constructor () {
    super(...arguments)
  }


  handleNavigate = () => {
    Taro.navigateTo({
      url: '/pages/requirement/detail'
    })
  }

  callPhone = (phone) => {
    Taro.makePhoneCall({phoneNumber: phone}).then(res => {
         console.log('--call phone--', res)
      })
  }

  onChange (value) {
    this.setState({
      value: value
    })
  }

  async onActionClick () {
    try {
      await Taro.request({
        url: api.getSearchList({page:1, keysword:this.state.value}),
        success: function (res) {
          console.log('获取正常', res.data)
        }
      }).then(res => {
         console.log(res.data)
         this.setState({
          threads: res.data,
          loading: false
        })
      })
    } catch (error) {
      Taro.showToast({
        title: '未能搜索到数据'
      })
    }
  }

  render () {

    if(this.state.loading) {
      return <Loading />
    }
    const {loading, threads} = this.state

    const element = threads.list.map((item, index) => {
      const de = item.detail.map((dm, di) => {
        return <View className='at-row'>
            <View className='at-col at-col-9'>{dm.catagory_name}</View>
            <View className='at-col at-col-3'>{dm.need_num}{dm.need_unit}</View>
          </View>;
      })
      return (
        <AtCard
          note={item.from_name}
          extra={item.status?'已核实':''}
          title={item.type_name}
          thumb='https://2020.comelygift.com/img/hospital.png'>
          {de}
          <View className='at-row'>
            <View className='at-col at-col-6'><AtButton className="home-button" type='primary' onClick={this.callPhone.bind(this, item.linkphone?item.linkphone:item.telphone)}>立即联系</AtButton></View>
            <View className='at-col at-col-6'><AtButton className="home-button" type='secondary' onClick={this.handleNavigate}>查看详情</AtButton></View>
          </View>
        </AtCard>
      )
    })

    return (
      <View className='index'>
        <AtSearchBar
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          actionName="搜索"
          onActionClick={this.onActionClick.bind(this)}
        />
        {element}
      </View>
    )
  }
}

